/* 
    Document   : registration
    Created on : Apr 9, 2013, 8:42:16 PM
    Author     : abie
    Description:
    Purpose of the stylesheet follows.
*/


/* ----------------------------------------------------------
    HEADER
---------------------------------------------------------- */

.head {
    &.registration {
        border-top: 3px solid #527bf4;
        overflow: hidden;
    }
    
    .org-name {
        line-height: 2em;
        height: 2em;        
        
        a {
            text-decoration: none;
            color: #3f80fd;
        }
    }
    
    .user-name {
        
        font-size: .9em;
        font-weight: normal;
        
        
        a {
            text-decoration: none;
        }        
    }
    @media all and (min-width: 40em) {
        .org-name {
            margin-top: 1em;
        }
        
        &.registration .user-name {
            margin-top: 3em;
        }
    }

}

.no-js #panel-show-button {
    display: none;
}

//////////////////////////////////////////////////////////////////
/// HOME

#page-registration-default-index {
    .org-description {
        
        p {
            text-align: justify;
        }
    }
    
    
    
    @media all and (max-width: 40em){
        .ui-block-a, .ui-block-b {
            width: 99.99%;
        }
        
        .ui-block-a {
            border-bottom: 1px solid #aaa;
            padding-bottom: .5em;
            margin-bottom: .5em;
        }
    }
    @media all and (min-width: 40em){
        .view-division {text-align: right !important;}
        
        .ui-block-a {
            border-right: 2pt solid #ccc;
        }
        
        .register-login form {
            padding: 10px;
        }
    }        
}



////////////////////////////////////////////////////////////////////////
/// 
#page-registration-default-division {
    .division {
        padding-bottom: .5em;
        border-bottom: 1px solid #ccc;
        margin-bottom: 1em;
        
        h2 {
            margin: 0;
        }
    }
}



////////////////////////////////////////////////////////////////////////
///

#page-registration-default-interview {
    .time {
        display: block;
        width: 90px;
        text-align: center;
        height: 45px;
        position: relative;
        float: left;
    }
    
    
    .time-label {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        line-height: 45px;
        text-align: center;
        border: 1px solid #ccc;
        background-color: #fff;
        
        font-size: .9em;
        -moz-transition: all .4s;
        -webkit-transition: all .4s;
        -o-transition: all .4s;
        transition: all .4s;
    }
    
    .time-label-available {
        cursor: pointer;
    }
    
    .time-label-available:hover {
        background-color: #cdf;
    }
    
    .time-label-selected {
        background-color: #57a !important;
        font-weight: bold;
        color: #fff;
        text-shadow: none;
    }
    
    .time-label-full {
        background-color: #ddd;
    }
    
    .time-label-halffull {
        background-color: #dec;
    }
    
    .date {
        clear: both;
        margin-bottom: .5em;
    }
    .date h3 {
        margin-bottom: 0;
        font-size: 1.1em;
        padding: .2em;
    }
    
    @media all and (min-width: 32em){
        .date {
            width: 25%;
            text-align: center;
            display: inline-block;
            clear: none;
        }
        
        .time {
            width: 100%;
            border-style: none;
        }
    }
    @media all and (min-width: 40em){
        .date {
            width: 20%;
        }
    }
    @media all and (min-width: 48em){
        .date {
            width: 16.66%;
        }
    }
}
